<template>
  <div ref="content" class="layui-content">
    <div class="scroll-content">
      <slot></slot>
      <div v-show="beforePullUpWord.length > 0">
        <PullingWord v-show="!inPullUp && dataList.length>0" :loadingWord="beforePullUpWord"></PullingWord>
        <Loading v-show="inPullUp" :loadingWord="PullingUpWord"></Loading>
      </div>
    </div>
    <transition name="pullDown">
      <Loading v-show="inPullDown" :loadingWord="PullingDownWord" class="pullDown"></Loading>
    </transition>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import Loading from '@/common/loading/loading.vue'
import PullingWord from './pulling-word'

const PullingUpWord = '正在拼命加载中...'
// const beforePullUpWord = '上拉加载更多'
const finishPullUpWord = '加载完成'
const PullingDownWord = '加载中...'

export default {
  components: {
    Loading,
    PullingWord
  },
  props: {
    dataList: {
      type: Array,
      default: () =>[]
    },
    messageList: {
      type: Array,
      default: () =>[]
    },
    probeType: {
      type: Number,
      default: 3
    },
    click: {
      type: Boolean,
      default: true
    },
    mySend: {
      type: Boolean,
      default: false
    },
    pullDownRefresh: {
      type: null,
      default: false
    },
    pullUpLoad: {
      type: null,
      default: false
    },
    scrollToEndFlag: {
      type: Boolean,
      default: false
    },
    beforePullUpWord: {
      type: String,
      default: '上拉加载更多'
    }
  },
  data() {
    return {
      scroll: null,
      inPullUp: false,
      inPullDown: false,
      // beforePullUpWord,
      PullingDownWord,
      PullingUpWord,
      continuePullUp: true,
      isBottom: true
    }
  },
  computed: {
    updateIsme() {
      return this.$store.state.mySend
    }
  },
  watch: {
    dataList() {
      this.$nextTick(()=>{
        this.refresh()
        this.keepPostion()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initScroll()

      this.scroll.on('pullingUp', () => {
        if (this.continuePullUp) {
          this.beforePullUp()
          this.$emit('onPullUp', '当前状态：上拉加载"')
        }
      })

      this.scroll.on('pullingDown', () => {
        this.beforePullDown()
        // console.log(-this.scroll.maxScrollY)
        this.$emit('onPullDown', '当前状态：下拉加载更多')
      })

      this.scroll.on('scroll', (res) => {
        // if (this.pullDownRefresh.stop <= Math.round(res.y)) {
        //   console.log(this.pullDownRefresh.stop, res.y)
        // }
        // this.scroll.scrollY = Math.round(res.y)
        if (res.y <= this.scroll.maxScrollY) { // 判断是否到底部
          this.isBottom = true
        } else {
          this.isBottom = false
        }
      })
    })
  },
  methods: {
    initScroll() {
      if (!this.$refs.content) {
        return
      }
      this.scroll = new BScroll(this.$refs.content, {
        probeType: this.probeType,
        click: this.click,
        pullDownRefresh: this.pullDownRefresh,
        pullUpLoad: this.pullUpLoad,
        mouseWheel: {
          speed: 20,
          invert: false,
          easeTime: 300
        }
      })
    },
    beforePullUp() {
      this.PullingUpWord = PullingUpWord
      this.inPullUp = true
    },
    beforePullDown() {
      this.disable()
      this.inPullDown = true
    },
    finish(type) {
      this[`finish${type}`]()
      this.enable()
      this[`in${type}`] = false
    },
    disable() {
      this.scroll && this.scroll.disable()
    },
    enable() {
      this.scroll && this.scroll.enable()
    },
    refresh() {
      this.scroll && this.scroll.refresh()
    },
    finishPullDown() {
      this.scroll && this.scroll.finishPullDown()
    },
    finishPullUp() {
      this.scroll && this.scroll.finishPullUp()
    },
    keepPostion() {
      if (this.$store.state.fristTime == '') { // 第一次加载时的位置
        this.$store.commit('updateChatPostion', this.scroll.scrollerHeight)
      }
      if (this.scrollToEndFlag && this.isBottom) {
        this.scroll.scrollTo(0, this.scroll.maxScrollY)
      }
      if (this.updateIsme) {
        this.scroll.scrollTo(0, this.scroll.maxScrollY)
        this.$store.commit('updatemySend', false)
      }
      if (!this.isBottom && !this.mySend) { // 聊天室下拉加载
        const Y = this.scroll.maxScrollY + this.$store.state.chatPostion - this.scroll.wrapperHeight
        if (Math.round(this.scroll.y - (this.scroll.wrapperHeight / '6')) > this.scroll.maxScrollY) {
          this.scroll.scrollTo(0, Y)
          this.$store.commit('updateChatPostion', this.scroll.scrollerHeight)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

  .list-wrapper{
    position: absolute;
    left: 0;
    top: 0;
    bottom:0;
    right:0;
    overflow: hidden;
    background: #fff;
  }
  .list-content{
    position: relative;
    z-index: 10;
    background: #fff ;
  }
  .list-item{
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    padding-left: 20px;
    border-bottom: 1px solid #e5e5e5;
  }
  .pulldown-wrapper{
    position: absolute;
    width: 100%;
    left: 0;
    display: flex;
    justify-content :center;
    align-items: center;
    transition: all;
  }
  .pullup-wrapper{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
  }
  .pullDown{
    position: absolute;
    top:0;
    left:0;
  }
  .pullDown-enter-active{
    transition:all 0.2s;
  }
  .pullDown-enter, .pullDown-leave-active{
    transform:translateY(-100%);
    transition:all 0.2s;
  }
</style>
